<script>
document.addEventListener("DOMContentLoaded", function () {
  const slideImgs = document.querySelectorAll(".sigmaweb-slide-img");
  const detailImg = document.querySelector("#sigmaweb-detail-image img");
  const detailName = document.querySelector("#sigmaweb-detail-name span");
  const detailPosition = document.querySelector("#sigmaweb-detail-position span");

  slideImgs.forEach(function (slide) {
    slide.addEventListener("click", function () {
      // حذف کلاس active از تمام تصاویر
      document.querySelectorAll(".sigmaweb-slide-img img").forEach(function (img) {
        img.classList.remove("active");
      });

      const imgElement = this.querySelector("img");
      const slide_img = imgElement.getAttribute("src");
      const slide_name = this.getAttribute("data-name");
      const slide_position = this.getAttribute("data-position");

      // اضافه کردن کلاس active به تصویر کلیک‌شده
      imgElement.classList.add("active");

      // تغییر دادن متن و تصویر
      detailImg.setAttribute("src", slide_img);
      detailName.textContent = slide_name;
      detailPosition.textContent = slide_position;

      // اضافه کردن کلاس انیمیشن
      detailImg.classList.add("animate-scale");

      // حذف کلاس انیمیشن بعد از مدت مشخص
      setTimeout(function () {
        detailImg.classList.remove("animate-scale");
      }, 300); // مدت زمان باید با CSS هماهنگ باشد
    });
  });

  // مقداردهی اولیه
  const firstSlide = slideImgs[0];
  const firstImg = firstSlide.querySelector("img");
  const firstImgSrc = firstImg.getAttribute("src");
  const firstName = firstSlide.getAttribute("data-name");
  const firstPosition = firstSlide.getAttribute("data-position");

  firstImg.classList.add("active");
  detailImg.setAttribute("src", firstImgSrc);
  detailName.textContent = firstName;
  detailPosition.textContent = firstPosition;
});
</script>